<template>
  <div v-if="data.yiyaMainClosingEntries.type === 3" class="center">
    <h4 class="title">咿呀口腔{{ clinic }} 退款单据</h4>
    <div v-if="data.yiyaClinicPerson" class="topTitle">
      <div>病历号：{{ data.yiyaClinicPerson.caseNumber }}</div>
      <div>姓名：{{ data.yiyaClinicPerson.name }}</div>
      <div>联系电话：{{ data.yiyaClinicPerson.phoneNumber }}</div>
    </div>
    <div v-if="data.yiyaClinicPerson" class="topTitle">
      <div>就诊医生：{{ data.doctor }}</div>
      <div v-if="data.yiyaMainClosingEntries">
        单据号：{{ data.yiyaMainClosingEntries.documentNum }}
      </div>
      <div></div>
    </div>

    <div class="main">
      <div class="mainRefund">
        <div style="width: 50%">
          <div>处置名称</div>
        </div>
        <div style="width: 50%">
          <div>退款金额</div>
        </div>
      </div>
      <div
        v-for="(items, index) in data.yiyaItemBillingExtends"
        :key="index"
        class="mainCenter"
        style="min-height: 20px"
      >
        <div class="mainRefundItem">
          <div class="mainTopLeft" style="width: 50%">
            <div class="secondDiv">{{ items.itemName }}</div>
          </div>
          <div class="mainTopRight" style="width: 50%">
            <div v-if="data.yiyaMainClosingEntries">{{ -items.thisPay }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="cost">
      <div v-if="data.total" class="costTop">
        <div>上次欠费：0.00</div>
        <div v-if="data.yiyaMainClosingEntries">
          应退: -{{ data.yiyaMainClosingEntries.thisPay }}
        </div>
        <div v-if="data.yiyaMainClosingEntries">
          实退：-{{ data.yiyaMainClosingEntries.thisPay }}
        </div>
        <div>欠费：0.00</div>
      </div>
      <!-- <div v-if="data.yiyaClosingMethods" class="costBottom">

        <div class="costBottomTwo">
          备注：{{ data.yiyaMainClosingEntries.closingRemarks }}
        </div>
      </div> -->
    </div>
    <div class="bottom" style="border-top: 1px solid black">
      <div v-if="data.yiyaBillingMain" class="bottomFirst">
        <div v-if="data.yiyaMainClosingEntries">
          退款人:{{ data.yiyaMainClosingEntries.charge }}
        </div>
        <div v-if="data.yiyaClosingMethods">
          收款时间：{{ data.yiyaClosingMethods[0].closingTime }}
        </div>
        <div>医生：{{ data.doctor }}</div>
      </div>
      <div class="bottomSecond">
        <div v-if="data.yiyaClosingMethods" class="costBottomOne">
          收款方式：{{ data.payMethods }} -{{
            data.yiyaMainClosingEntries.thisPay
          }}
        </div>
        <div>地址：{{ clinicMsg.address }}</div>
        <div>电话：{{ clinicMsg.phone }}</div>
      </div>
    </div>
  </div>
  <div v-else class="center">
    <h4 class="title">咿呀口腔{{ clinic }}</h4>
    <div v-if="data.yiyaClinicPerson" class="topTitle">
      <div>病历号：{{ data.yiyaClinicPerson.caseNumber }}</div>
      <div>姓名：{{ data.yiyaClinicPerson.name }}</div>
      <div>电话：{{ data.yiyaClinicPerson.phoneNumber }}</div>
      <div v-if="data.yiyaMainClosingEntries">
        单据号：{{ data.yiyaMainClosingEntries.documentNum }}
      </div>
    </div>
    <div class="main">
      <div class="mainTop">
        <div class="mainTopLeft">
          <div class="startDiv">牙位</div>
          <div>处置名称</div>
        </div>
        <div class="mainTopRight">
          <div>数量</div>
          <div>单位</div>
          <div>单价</div>
          <div>原价</div>
          <div>折后价</div>
          <div>实收</div>
        </div>
      </div>
      <div
        v-for="(items, index) in data.yiyaItemBillingExtends"
        :key="index"
        class="mainCenter"
      >
        <div class="mainCenterItem">
          <div class="mainTopLeft">
            <div v-if="items.toothPosition" class="startDiv">
              <div class="leftTop">
                {{ items.toothPosition.split('|')[0].toString() }}
              </div>
              <div class="rightTop">
                {{ items.toothPosition.split('|')[1].toString() }}
              </div>
              <div class="leftBtn">
                {{ items.toothPosition.split('|')[2].toString() }}
              </div>
              <div class="rightBtn">
                {{ items.toothPosition.split('|')[3].toString() }}
              </div>
            </div>
            <div v-else class="startDiv">
              <div class="leftTop"></div>
              <div class="rightTop"></div>
              <div class="leftBtn"></div>
              <div class="rightBtn"></div>
            </div>
            <div class="secondDiv">{{ items.itemName }}</div>
          </div>
          <div class="mainTopRight">
            <div>{{ items.count }}</div>
            <div>{{ items.unit }}</div>
            <div>{{ items.unitPrice }}</div>
            <div>{{ items.originalPrice }}</div>
            <div>{{ parseInt(items.discountPrice) }}.00</div>
            <div>{{ items.paidInAmount }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="cost">
      <div v-if="data.total" class="costTop">
        <div>原价：{{ data.total.originalPrice }}</div>
        <div>整单折扣%：{{ data.total.discount }}</div>
        <div>上次欠费：0.00</div>
        <div>折后金额：{{ parseInt(data.total.discountPrice) }}.00</div>
        <div v-if="data.yiyaMainClosingEntries">
          本次缴费：{{ data.yiyaMainClosingEntries.thisPay }}
        </div>
      </div>
      <div v-if="data.total" class="costCenter">
        <div class="costCenterFirst">实收金额(大写):</div>
        <div>本次欠费：{{ parseInt(data.total.owingPrice) }}.00</div>
        <div>储值划扣：{{ data.total.petCardAmount }}</div>
        <div>优惠抵扣：{{ data.total.deductionAmount }}</div>
      </div>
      <div v-if="data.yiyaClosingMethods" class="costBottom">
        <div class="costBottomOne">
          收款方式：{{ data.payMethods
          }}{{ data.yiyaMainClosingEntries.thisPay }}
        </div>
        <div class="costBottomTwo" v-if="data.yiyaMainClosingEntries">
          备注：{{ data.yiyaMainClosingEntries.closingRemarks }}
        </div>
      </div>
    </div>
    <div class="bottom">
      <div v-if="data.yiyaBillingMain" class="bottomFirst">
        <div v-if="data.yiyaMainClosingEntries">
          收银员:{{ data.yiyaMainClosingEntries.charge }}
        </div>
        <div>医生：{{ data.doctor }}</div>
        <div v-if="data.yiyaMainClosingEntries">
          TC：{{ data.yiyaMainClosingEntries.billingPerson }}
        </div>
        <div v-if="data.yiyaClosingMethods">
          收款时间：{{ data.yiyaClosingMethods[0].closingTime }}
        </div>
      </div>
      <!-- <div class="bottomSecond">
        <div>地址：{{ clinicMsg.address }}</div>
        <div>电话：{{ clinicMsg.phone }}</div>
      </div> -->
    </div>
  </div>
</template>

<script>
/**到店——患者信息——收费记录 */
/**到店——患者信息——未结账记录——结账 */
import { mapGetters } from 'vuex'
import { getClinicId } from '@/utils/clinic'

export default {
  name: 'Accounts',
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      clinicMsg: {},
    }
  },
  computed: {
    ...mapGetters(['clinic']),
  },
  mounted() {
    this.getClinicMsg()
    setTimeout(() => {
      console.log(this.data)
    }, 300)
  },
  methods: {
    async getClinicMsg() {
      const { data } = await this.$store.dispatch('getClinic', getClinicId())
      this.clinicMsg = data
    },
  },
}
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;
  width: 100%;
  .title {
    text-align: center;
  }
  .topTitle {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .main {
    display: flex;
    width: 100%;
    flex-direction: column;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    .mainRefund {
      display: flex;
      width: 100%;
      flex-wrap: nowrap;
      padding: 4px 0;
      border-bottom: 1px solid black;
      font-weight: 700;
    }
    .mainTop {
      display: flex;
      flex-wrap: nowrap;
      border-bottom: 1px solid black;
      padding: 4px 0;
      justify-content: space-between;
      .mainTopLeft {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 35%;
        .startDiv {
          width: 130px;
          text-align: center;
        }
        .secondDiv {
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
        }
      }
      .mainTopRight {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 65%;
        div {
          width: 87px;
          text-align: center;
        }
      }
    }
    .mainCenter {
      display: flex;
      flex-direction: column;
      width: 100%;
      // min-height: 220px;
      .mainRefundItem {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        padding: 4px 0;
      }
      .mainCenterItem {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 35px;
        margin: 4px 0;
        .mainTopLeft {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 35%;
          .startDiv {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space;
            width: 130px;
            height: 35px;
            text-align: center;
            div {
              width: 50%;
              height: 50%;
              text-align: center;
            }
            .leftTop {
              border-right: 1px solid #666;
              border-bottom: 1px solid #666;
            }
            .rightTop {
              border-left: 1px solid #666;
              border-bottom: 1px solid #666;
            }
            .leftBtn {
              border-right: 1px solid #666;
              border-top: 1px solid #666;
            }
            .rightBtn {
              border-left: 1px solid #666;
              border-top: 1px solid #666;
            }
          }
        }
        .mainTopRight {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 65%;
          div {
            width: 87px;
            text-align: center;
          }
        }
      }
    }
  }
  .cost {
    display: flex;
    flex-direction: column;
    .costTop,
    .costCenter,
    .costBottom {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      padding: 4px 0;
      div {
        display: flex;
        flex-wrap: nowrap;
        width: 20%;
      }
    }
    .costCenter .costCenterFirst {
      width: 40%;
    }
    .costBottom {
      border-bottom: 1px solid black;
      .costBottomOne {
        width: 40%;
      }
      .costBottomTwo {
        width: 60%;
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    .bottomFirst,
    .bottomSecond {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      padding: 4px 0;
      .bottomFirst div {
        display: flex;
        flex-wrap: nowrap;
        width: 25%;
      }
      .bottomSecond div {
        display: flex;
        flex-wrap: nowrap;
        width: 50%;
      }
    }
  }
}
</style>
